<template>
  <div>
    <h1>1.动态dynamic组件使用</h1>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件-动态切换 不同组件 显示</p>
    <div style="boder: 1px solid red">
      <!-- keep-alive是内置组件，让动态组件缓存而不是销毁 -->
      <!-- 总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法 -->
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import UserName from "../components/UserName.vue";
import UserInfo from "../components/UserInfo.vue";
export default {
  components: {
    UserName,
    UserInfo,
  },
  data() {
    return {
      comName: "UserName",
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>